<style scoped>

</style>
<template>
<div class="page-wrapper">
    <div class="page-wrapper__body">
        <div class="page-container is-form"  v-loading="isLoading">
            <el-dialog title="部门选择" :visible.sync="dialogTreeVisible">
                <el-tree :data="deptTreeData" node-key="id" default-expand-all
                         :props="defaultProps" @node-click="handleNodeClick">
                </el-tree>
            </el-dialog>
            <el-form ref="form" :model="form" :rules="rules" label-position="top">
                <div class="block-title"><i>¶</i> 员工信息</div>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="员工姓名" prop="name">
                            <el-input v-model="form.name" clearable maxlength="20" placeholder="请输入员工姓名" required></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="登录账号" prop="username">
                            <el-input v-model="form.username" :readonly="params.id >0" maxlength="20" clearable placeholder="请输入登录账号" required></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="联系电话" prop="phone">
                            <el-input v-model="form.phone" clearable placeholder="请输入联系电话" required></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="部门" >
                            <el-input v-model="form.departName" readonly placeholder="请选择部门">
                                <el-button slot="append" icon="el-icon-search" @click="checkDept()"></el-button>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item >
                    <el-radio-group v-model="form.isAdmin">
                        <el-radio :label="1">管理员</el-radio>
                        <el-radio :label="0">员工</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="form.remark" maxlength="255" clearable placeholder="备注"  rows="3"></el-input>
                </el-form-item>
                <div class="block-title"><i>¶</i> 角色权限 </div>
                <el-form-item>
                    <el-checkbox-group v-model="checkedRoleIds">
                        <el-checkbox v-for="role in roleList" :label="role.id" :key="role.id" border>{{role.name}}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <div class="form-footer">
        <el-button type="primary" @click="onSubmit" style="width:120px;">保存</el-button>
        <el-button @click="$router.go(-1)">取 消</el-button>
    </div>
</div>
</template>

<script>
    import adminUser from '@/model/adminUser/index';
    import {findDetail, save,checkUserName} from "../../api/adminUser";
    import {loadTreeData as loadDeptTreeData} from "../../api/department";
    import {findAllList as loadRoleList} from "../../api/adminRole";

    export default {
        data() {
            const validUsername = async (rule , value , callback)=>{
                let param = {key:value , id:this.form.id};
                let resp = await checkUserName(param);
                if(!this.qUtil.validResp(resp))
                    return callback(new Error('登录名已被使用 ,换一个吧~'));
                if(!resp.data)
                    return callback(new Error('登录名已被使用，换一个吧~'));
            }
            return {
                form: this.baseUtil.modelCopy(adminUser),
                roleList:[],
                checkedRoleIds:[],
                params: {
                    id: 0
                },
                dialogTreeVisible:false,
                deptTreeData:[],
                defaultProps: {children: 'children', label: 'name' },
                isLoading: false,
                rules: {
                    name: [{required: true, message: '请输入员工姓名', trigger: 'blur'}],
                    username:[{required:true,message: '请输入登录账号', trigger: 'blur'},
                        {validator:validUsername,trigger:'blur'}],
                    phone:[{required: true, message: '请输入联系电话', trigger: 'blur'}],
                },
            }
        },
        methods: {
            onSubmit() {
                this.isLoading = true;
                this.$refs['form'].validate((valid)=>{
                    if (valid) {
                        this.saveForm();
                    } else {
                        this.isLoading = false;
                        return false;
                    }
                })
            },
            async saveForm() {
                let dataParam = {adminUser: this.form,roleIds:this.checkedRoleIds};
                let resp = await save(dataParam);
                this.isLoading = false;
                if (resp != null && resp.data != null)
                    this.$router.push("/adminUserList");

            },

            checkDept(){
                this.dialogTreeVisible=true;
            },
            handleNodeClick(value , node , treeValue){
                this.form.departmentId = value.id;
                this.form.departName = value.name;
                this.dialogTreeVisible = false;

            },
            async loadData() {
                this.isLoading = true;
                let resp = await findDetail(this.params.id);
                if(!this.qUtil.validResp(resp)){
                    this.$message({type: 'error', message: '员工信息加载失败!', showClose: true});
                    return false;
                }
                this.form = resp.data.adminUser;
                this.checkedRoleIds = resp.data.adminUser.roleIds;
                this.isLoading = false ;
            },
            async loadDeptTreeData() {
                // this.isLoading = true;
                let resp = await loadDeptTreeData();
                if(!this.qUtil.validResp(resp)){
                    this.$message({type: 'error', message: '部门数据加载失败!', showClose: true});
                    return false;
                }
                this.deptTreeData = resp.data.dataList;
                // this.isLoading = false ;
            },
            async loadRoleList(){
                let resp = await loadRoleList();
                if(!this.qUtil.validResp(resp)){
                    this.$message({type: 'error', message: '角色数据加载失败!', showClose: true});
                    return false;
                }
                this.roleList = resp.data.dataList;
            }
        },
        mounted() {
            this.params.id = this.$route.query.id || 0;
            this.loadDeptTreeData();
            this.loadRoleList();
            if (this.params.id > 0) {
                this.loadData();
            }
        }
    }
</script>